import { RepoLink } from 'libframe-docs/components/RepoLink'

## Examples

 - React: <RepoLink path='/examples/cloudflare-workers/' />
 - Vue + HTML streaming: <RepoLink path='/examples/cloudflare-workers-vue-html-streaming/' />

## Cloudflare Pages & wrangler 2

With [wrangler v2](https://github.com/cloudflare/wrangler2), we can deploy a Cloudflare Worker (server code) along Cloudflare Pages (static files).

Example:
 - [github.com/thetre97/vite-plugin-ssr-cloudflare-pages](https://github.com/thetre97/vite-plugin-ssr-cloudflare-pages).

See also:
 - [Wrangler 2.0 — a new developer experience for Cloudflare Workers](https://blog.cloudflare.com/wrangler-v2-beta/)
 - [github.com/cloudflare/wrangler2](https://github.com/cloudflare/wrangler2)


## Dev Server

We recommend to:
 - For dev, use an Express.js server instead of a worker, for much faster HMR & dev start. (So we skip `wrangler` / `miniflare` / Cloudflare Workers altogether while developing our app. We still use `wrangler`/`miniflare` to develop the worker code integration.)
 - For production, bundle the worker code with Cloudflare Workers's webpack bundler.

See examples above.

## Bundling

By default, we recommend using Cloudflare Workers's webpack bundler because it's the beaten path;
using another bundler may cause subtle differences that may cause problems.

That said, we can use any other bundler (esbuild, rollup, ...) to bundle our worker code.

## `importBuild.js`

Cloudflare Workers requires us to bundle our entire worker code into a single file.

For bundlers to be able to discover & bundle the entire dependency tree, we need to use [`dist/server/importBuild.js`](/importBuild.js).

Example: <RepoLink path='/examples/cloudflare-workers/worker/ssr.js' />.

## Universal `fetch()`

When using Node.js for dev and Cloudflare Workers for production, we may need a `fetch()` function that works in both environments.

But libraries such as `node-fetch` or `cross-fetch` usually don't work with Cloudflare Workers.

What we can do is to define a fetch function at `pageContext.fetch` that works in all environments.
The trick is to add a different `fetch()` implementation to `pageContextInit` at [`renderPage(pageContextInit)`](createPageRenderer).

Example: <RepoLink path='/examples/cloudflare-workers#universal-fetch' />.
